
<template>
	<view class="body">
		<p class="title">问题反馈</p>
		<p class="introduce">店家正在倾听您的反馈</p>
		<textarea class="content" placeholder="请输入您需要反馈的问题…" v-model="textareaValue" />
		<!-- <input class="phone" placeholder="QQ/手机号/邮箱" v-model="inputValue" /> -->
		<view class="button" @click="submitForm">提交</view>
		<view v-if="errorMessage" class="error-message">{{ errorMessage }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				textareaValue: '',
				// inputValue: '',
				errorMessage: ''
			};
		},
		methods: {
			submitForm() {
				// 校验逻辑
				if (!this.textareaValue) {
					this.errorMessage = '反馈内容不能为空';
					return;
				}
				// if (!this.inputValue) {
				// 	this.errorMessage = '联系方式不能为空';
				// 	return;
				// }

				// 清除错误信息
				this.errorMessage = '';
				
				this.$util.Tips({
					title: '反馈成功！'
				});
				// // 模拟提交表单
				// console.log('提交的表单数据:', {
				// 	textareaValue: this.textareaValue,
				// 	inputValue: this.inputValue
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		padding: 60rpx 24rpx;

		.title {
			font-weight: 600;
			font-size: 48rpx;
			color: #000000;
			line-height: 67rpx;
			text-align: left;
		}

		.introduce {
			font-weight: 400;
			font-size: 28rpx;
			color: #A1A1A1;
			line-height: 40rpx;
			text-align: left;
			margin: 12rpx 0rpx 30rpx 0rpx;
		}

		.content {
			width: 654rpx;
			height: 428rpx;
			background: #F8F8F8;
			border-radius: 12rpx;
			background-color: #fff;
			padding: 32rpx 24rpx;
		}

		.phone {
			width: 654rpx;
			height: 68rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #A1A1A1;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			background-color: #fff;
			padding: 20rpx 24rpx;
			margin: 30rpx 0rpx 100rpx 0rpx;
		}

		.button {
			width: 654rpx;
			height: 85rpx;
			background: #085CD6;
			border-radius: 43rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 85rpx;
			text-align: center;
			margin: auto;
		}

		.error-message {
			color: red;
			font-size: 24rpx;
			margin-top: 20rpx;
			text-align: center;
		}
	}
</style>